import React, { createContext, useState } from 'react';

import CounterClass from './experience_hooks/counter-class';
import CounterHook from './experience_hooks/counter-hook';
import CounterHook2 from './experience_hooks/counter-hook2';
import MultipleHookState from './useState/multiple_state';
import ComplexHookState from './useState/multipleState_change';
import ClassCounterTitleChange from './useEffect/class_title';
import HookCounterChangeTitle from './useEffect/hook_title';
import EffectHookCancelDemo from './useEffect/useEffect_subscribe';
import MultiEffectHookDemo from './useEffect/useEffects';
import ContextHookDemo from './useContext/useContext';
import Home from './useReducer/home';
import CallbackHookDemo01 from './useCallback/useCallback_cannot';
import CallbackHookDemo02 from './useCallback/useCallbackcan';
import MemoHookDemo1 from './useMemo/useMemo_Computed';
import MemoHookDemo2 from './useMemo/useMemo_Component';
import RefHookDemo01 from './useRef/useRef_DOM';
import RefHookDemo02 from './useRef/useRef_QuoteData';
import ForwardRefDemo from './useImperativeHandle/forwardRef';
import UseImperativeHandleHookDemo from './useImperativeHandle/useImperativeHandle';
import EffectCounterDemo from './useLayoutEffect/useEffect_Counter_Change';
import UseLayoutEffectCounter from './useLayoutEffect/useLayoutEffect_change';
import CustomLifeHookDemo01 from './customize_hook/customize_hook_first';
import CustomContextShareHook from './customize_hook/customize_context';
import CustomScrollPositionHook from './customize_hook/customize_hook_position';
import CustomLocalStorage from './customize_hook/customize_localStorage';




export const UserContext = createContext();
export const TokenContext = createContext();

export const ThemeContext = createContext();


export default function App() {
  const [show, setShow] = useState(true);


  return (
    <div>
      {/* Hook初体验 */}
      {/* <CounterClass/> */}
      {/* <CounterHook/> */}
      {/* <CounterHook2/> */}

      {/* useState */}
      {/* <MultipleHookState/> */}
      {/* <ComplexHookState/> */}


      {/* useEffect */}
      {/* <ClassCounterTitleChange/> */}
      {/* <HookCounterChangeTitle/> */}
      {/* <EffectHookCancelDemo/> */}
     
      {/* 当组件消失的时候,就会取消订阅 */}
      {/* { show && <EffectHookCancelDemo/> } */}
      {/* <MultiEffectHookDemo/> */}

      {/* useContext */}

      {/* <UserContext.Provider value={{name: 'leon', age: 18}}>
        <ThemeContext.Provider value={{fontSize: '30px', color: 'red'}}>
          <ContextHookDemo />
        </ThemeContext.Provider>
      </UserContext.Provider> */}

      {/* useReducer */}
      {/* <Home/> */}

      {/* useCallback */}
      {/* <CallbackHookDemo01/> */}
      {/* <CallbackHookDemo02/> */}

      {/* useMemo */}
      {/* <MemoHookDemo1/> */}
      {/* <MemoHookDemo2/> */}

      {/* useRef */}
      {/* <RefHookDemo01/> */}
      {/* <RefHookDemo02/> */}

      {/* useImperativeHandle */}
      {/* <ForwardRefDemo/> */}
      {/* <UseImperativeHandleHookDemo/> */}

      {/* useLayoutEffect */}
      {/* <EffectCounterDemo/> */}
      {/* <UseLayoutEffectCounter/> */}

      {/* customize Hook */}
      {/* {show && <CustomLifeHookDemo01/>} */}
      {/* <UserContext.Provider value={{name: 'leon', age: 18}}>
        <TokenContext.Provider value="yang">
          <CustomContextShareHook/>
        </TokenContext.Provider>
      </UserContext.Provider> */}
      {/* <CustomScrollPositionHook/> */}
      <CustomLocalStorage/>

      <button onClick={e => {setShow(!show)}}>切换</button>
    </div>
  )
}